<template>
  <van-popup v-model:show="_show" round position="bottom" :before-close="handleClose">
    <van-cascader
      :title="title"
      v-model="cascaderValue"
      :options="options"
      @close="handleClose"
      @finish="onFinish"
    />
  </van-popup>
</template>
<script setup>
const emit = defineEmits(['update:modelValue', 'update:show', 'update:desc', 'change'])
const props = defineProps({
  title: { type: String, default: '请选择' },
  options: Array,
  modelValue: String,
  show: { type: Boolean, default: false },
  desc: String,
})

const _show = ref(props.show)
const cascaderValue = ref('')

watch(
  () => props.show,
  () => (_show.value = props.show)
)

watch(
  () => props.modelValue,
  () => (cascaderValue.value = props.modelValue)
)

// const options = [
//   {
//     text: '浙江省',
//     value: '330000',
//     children: [
//       {
//         text: '杭州市',
//         value: '330100',
//         children: [{ text: '杭州市', value: '330100' }],
//       },
//     ],
//   },
// ]

const handleClose = () => emit('update:show', false)

// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => {
  handleClose()
  emit('update:modelValue', cascaderValue.value)
  emit('update:desc', selectedOptions.map(option => option.text).join('/'))
  emit('change', selectedOptions)
}
</script>
<style lang="scss" scoped></style>
